// return;
let classType = 1;
var timeChart = echarts.init(document.getElementsByClassName("work-chart")[0]);
function init_option(dateArr, dataOpen, dataClose) {
  let classTypeStr =
    classType == 1
      ? "灯光"
      : classType == 2
      ? "窗帘"
      : classType == 3
      ? "温控器"
      : classType == 4
      ? "传感器"
      : null;
  let option = {
    tooltip: {
      trigger: "axis",
      // axisPointer: {
      //     type: "shadow"
      // }
      // formatter: `{b0}:<br />{b1}:<br />${_this.model}<br /> 开{c0}/关{c1}`
      formatter: function (params) {
        //    axisValue 对应的就是 yAxis中data 的值 ； 如果要显示成年月日，需要格式化
        return `<div style="font-weight: bolder;">${
          params[0].axisValue
        }<br />${classTypeStr}<br /> 开${params[0].data}h/关${Math.abs(
          params[1].data
        )}h</div>`;
      },
    },
    legend: {
      data: ["关闭", "打开"],
      x: "left",
      y: "top",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // data: [-24, -10, -0, -10, -24],
    xAxis: [
      {
        type: "value",
        max: 24,
        min: -24,
        interval: 4,
        axisLabel: {
          formatter: function (value, index) {
            return Math.abs(value);
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: dateArr || [
          "12.27",
          "12.26",
          "12.25",
          "12.24",
          "12.23",
          "12.22",
          "12.21",
        ],
        // data: execData.dateArrFormat,
        axisLabel: {
          formatter: function (value, index) {
            return `${value}日`;
          },
        },
      },
    ],
    series: [
      {
        name: "打开",
        type: "bar",
        stack: "Total",

        emphasis: {
          focus: "series",
        },
        data: dataOpen || [20, 8, 7, 10, 12, 3, 15],
        // data: execData.dataOpen,
        // 柱子高度
        barWidth: 10,
        // 柱- 颜色
        itemStyle: {
          color: "#0077FA",
        },
      },
      {
        name: "关闭",
        type: "bar",
        stack: "Total",
        // label: {
        //     show: true,
        //     position: "left"
        // },
        emphasis: {
          focus: "series",
        },
        data: dataClose || [-4, -16, -17, -14, -12, -21, -9],
        // data: execData.dataClose,
        barWidth: 10,
        itemStyle: {
          color: "#C3C7CC",
        },
      },
    ],
  };
  return option;
}
timeChart.setOption(init_option());
window.addEventListener("resize", function () {
  timeChart.resize();
});

/*** 设备上线率 ***/
let onlineChart = echarts.init(document.getElementById("online-chart"));

function init_option2(daysArr, dataArr) {
  let option2 = {
    tooltip: {
      trigger: "axis",
      // axisPointer: {
      //     type: "shadow"
      // }
      // formatter: `{b0}:<br />{b1}:<br />${_this.model}<br /> 开{c0}/关{c1}`
      formatter: function (params) {
        //    axisValue 对应的就是 yAxis中data 的值 ； 如果要显示成年月日，需要格式化
        return `<div style="font-weight: bolder;">${params[0].axisValue}<br />上线率 ${params[0].data}%</div>`;
      },
    },
    legend: {
      show: false,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: daysArr || [
        "12.27",
        "12.26",
        "12.25",
        "12.24",
        "12.23",
        "12.22",
        "12.21",
      ],
      // data: daysArr,
    },
    yAxis: {
      type: "value",
      max: 100,
      min: 0,
      interval: 20,
    },
    series: [
      {
        data: dataArr || [10, 52, 48, 76, 50, 64, 0],
        // data: dataArr,

        type: "line",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0,119,250,0.5)",
            },
            {
              offset: 0.8,
              color: "rgba(0,119,250,0)",
            },
          ]),
        },
      },
    ],
  };
  return option2;
}
onlineChart.setOption(init_option2());
window.addEventListener("resize", function () {
  onlineChart.resize();
});
/***END***/

/*** 用户行为日活率 ***/

let dailyChart = echarts.init(document.getElementById("user-chart"));

function init_option3(daysArr, appArr, timing, automate, panel, cloud, sound) {
  let option3 = {
    legend: {
      show: true,
      data: [
        "APP控制",
        "定时控制",
        "自动化控制",
        "面板控制",
        "摩根云控制",
        "音响控制",
      ],
      x: "left",
      y: "top",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: daysArr || [
        "12.27",
        "12.26",
        "12.25",
        "12.24",
        "12.23",
        "12.22",
        "12.21",
      ],
      // data: daysArr,
    },
    yAxis: {
      type: "value",
      // max: Math.ceil(max * 1.2),
      min: 0,
      // interval: Math.ceil(Math.ceil(max * 1.2) / 6),
    },
    series: [
      {
        name: "APP控制",
        data: appArr || [1, 0, 0, 0, 0, 0, 0, 0],
        type: "line",
        smooth: true,
      },
      {
        name: "定时控制",
        data: timing || [0, 1, 0, 0, 0, 0, 0, 0],
        type: "line",
        smooth: true,
      },
      {
        name: "自动化控制",
        data: automate || [0, 0, 1, 0, 0, 0, 0, 0],
        type: "line",
        smooth: true,
      },
      {
        name: "面板控制",
        data: panel || [0, 0, 0, 1, 0, 0, 0, 0],
        type: "line",
        smooth: true,
      },
      {
        name: "摩根云控制",
        data: cloud || [0, 0, 0, 0, 1, 0, 0, 0],
        type: "line",
        smooth: true,
      },
      {
        name: "音响控制",
        data: sound || [0, 0, 0, 0, 0, 1, 0, 0],
        type: "line",
        smooth: true,
      },
    ],
  };
  return option3;
}
dailyChart.setOption(init_option3());
window.addEventListener("resize", function () {
  dailyChart.resize();
});

/***END***/

/*** 用户行为  ***/
let commandChart = echarts.init(document.getElementById("behavior-chart"));
function init_option4(data) {
  let option4 = {
    tooltip: {
      trigger: "axis",
      // axisPointer: {
      //     type: "shadow"
      // }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // data: [-24, -10, -0, -10, -24],
    xAxis: [
      {
        type: "value",
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: ["灯光开", "灯光关", "空调开", "空调关"],
      },
    ],
    series: [
      {
        type: "bar",
        stack: "Total",
        // 是否显示 数据文字
        label: {
          show: true,
          color: "#f4f4f4",
        },
        emphasis: {
          focus: "series",
        },
        data: data || [100, 200, 300, 400],
        // 柱子高度
        barWidth: 12,
        // 柱- 颜色
        itemStyle: {
          color: "#FC8800",
        },
      },
    ],
  };
  return option4;
}
commandChart.setOption(init_option4());
window.addEventListener("resize", function () {
  commandChart.resize();
});
/***END***/

/*** 设备概况：圆环图 ***/
let onlineCharts = echarts.init(document.getElementById("device-online"));
function init_option01(total, online) {
  let onlineData = {
    total: total,
    online: online,
  };
  let option01 = {
    title: {
      text: `${onlineData.online}\n/${onlineData.total}`,
      x: "center",
      y: "center",
      textStyle: {
        color: "#303030",
        fontSize: 13,
        fontWeight: "normal",
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40px", "45px"],
        hoverAnimation: false, //起始位置
        silent: true,
        minAngle: 0,
        avoidLabelOverlap: false,
        startAngle: 90, //其实角度 0的位置是在3点钟 逆时针计算
        label: {
          normal: {
            show: false,
          },
        },
        color: ["#3BB346", "#EEE"],
        data: [
          {
            value: onlineData.online,
            name: "在线",
            id: 100,
          },
          {
            value: onlineData.total - onlineData.online,
            name: "",
            itemStyle: {
              normal: { color: "#eeeeee" },
              emphasis: { color: "#f3f3f3" },
            },
          },
        ],
      },
    ],
  };
  return option01;
}
onlineCharts.setOption(init_option01(100, 40));
window.addEventListener("resize", function (params) {
  onlineCharts.resize();
});
// 设备打开
let openCharts = echarts.init(document.getElementById("device-open"));
function init_option02(total, open) {
  let openData = {
    total: total,
    open: open,
  };
  let option02 = {
    title: {
      text: `${openData.open}\n/${openData.total}`,
      x: "center",
      y: "center",
      textStyle: {
        color: "#303030",
        fontSize: 13,
        fontWeight: "normal",
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40px", "45px"],
        hoverAnimation: false, //起始位置
        silent: true,
        minAngle: 0,
        avoidLabelOverlap: false,
        startAngle: 90, //其实角度 0的位置是在3点钟 逆时针计算
        label: {
          normal: {
            show: false,
          },
        },
        color: ["#0077FA", "#EEE"],
        data: [
          {
            value: openData.open,
            name: "在线",
            id: 100,
          },
          {
            value: openData.total - openData.open,
            name: "",
            itemStyle: {
              normal: { color: "#eeeeee" },
              emphasis: { color: "#f3f3f3" },
            },
          },
        ],
      },
    ],
  };
  return option02;
}

openCharts.setOption(init_option02(200, 123));
window.addEventListener("resize", function (params) {
  openCharts.resize();
});

// 设备离线
let offlineCharts = echarts.init(document.getElementById("device-offline"));

function init_option03(total, offline) {
  let offlineData = {
    total: total,
    offline: offline,
  };
  let option03 = {
    title: {
      text: `${offlineData.offline}\n/${offlineData.total}`,
      x: "center",
      y: "center",
      textStyle: {
        color: "#303030",
        fontSize: 13,
        fontWeight: "normal",
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40px", "45px"],
        hoverAnimation: false, //起始位置
        silent: true,
        minAngle: 0,
        avoidLabelOverlap: false,
        startAngle: 90, //其实角度 0的位置是在3点钟 逆时针计算
        label: {
          normal: {
            show: false,
          },
        },
        color: ["#F93920", "#EEE"],
        data: [
          {
            value: offlineData.offline,
            name: "在线",
            id: 100,
          },
          {
            value: offlineData.total - offlineData.offline,
            name: "",
            itemStyle: {
              normal: { color: "#eeeeee" },
              emphasis: { color: "#f3f3f3" },
            },
          },
        ],
      },
    ],
  };
  return option03;
}
offlineCharts.setOption(init_option03(200, 32));
window.addEventListener("resize", function (params) {
  offlineCharts.resize();
});
/***END***/

/*** 切换 ***/
var navItems = $(".navbar-item");
$("#navbar-btns").on("click", "a", function () {
  var self = $(this);
  var path = self.attr("data-name");
  if (!path) {
    return false;
  }
  window.location.hash = "nav=" + path;
  navItems.each(function () {
    $(this).removeClass("active");
  });
  self.addClass("active");
});
function format_path(param) {
  return param.replace("#", "").split("=")[1];
}
/* 设备概况 */
// 主机在线
function reset_onlineCharts(type) {
  var data = {
    week: {
      total: 100,
      online: 40,
    },
    month: {
      total: 100,
      online: 70,
    },
    year: {
      total: 100,
      online: 98,
    },
  };
  onlineCharts.setOption(init_option01(data[type].total, data[type].online));
}
// 设备打开
function reset_openCharts(type) {
  var data = {
    week: {
      total: 200,
      open: 123,
    },
    month: {
      total: 200,
      open: 175,
    },
    year: {
      total: 200,
      open: 200,
    },
  };
  openCharts.setOption(init_option02(data[type].total, data[type].open));
}
// 设备离线
function reset_offlineCharts(type) {
  var data = {
    week: {
      total: 200,
      offline: 32,
    },
    month: {
      total: 200,
      offline: 120,
    },
    year: {
      total: 200,
      offline: 140,
    },
  };
  offlineCharts.setOption(init_option03(data[type].total, data[type].offline));
}
/* end */
// 设备上线率
function reset_onlineChart(type) {
  var data = {
    week: {
      daysArr: ["12.27", "12.26", "12.25", "12.24", "12.23", "12.22", "12.21"],
      dataArr: [10, 52, 48, 76, 50, 64, 0],
    },
    month: {
      daysArr: [
        "12.27",
        "12.26",
        "12.25",
        "12.24",
        "12.23",
        "12.22",
        "12.21",
        "12.20",
        "12.19",
        "12.18",
        "12.17",
        "12.16",
        "12.15",
        "12.14",
        "12.13",
        "12.12",
        "12.11",
        "12.10",
        "12.09",
        "12.08",
        "12.07",
        "12.06",
      ],
      dataArr: [
        10, 52, 48, 76, 50, 64, 0, 17, 19, 88, 65, 77, 32, 41, 65, 14, 19, 57,
        66, 70, 89, 14,
      ],
    },
    year: {
      daysArr: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      dataArr: [50, 66, 77, 88, 42, 60, 38, 74, 83, 26, 99, 21],
    },
  };
  onlineChart.setOption(init_option2(data[type].daysArr, data[type].dataArr));
}
// 设备工作时长
function reset_timeChart(type) {
  var data = {
    week: {
      dateArr: ["12.27", "12.26", "12.25", "12.24", "12.23", "12.22", "12.21"],
      dataOpen: [20, 8, 7, 10, 12, 3, 15],
      dataClose: [-4, -16, -17, -14, -12, -21, -9],
    },
    month: {
      dateArr: [
        "12.27",
        "12.26",
        "12.25",
        "12.24",
        "12.23",
        "12.22",
        "12.21",
        "12.20",
        "12.19",
        "12.18",
        "12.17",
        "12.16",
        "12.15",
        "12.14",
        "12.13",
        "12.12",
        "12.11",
        "12.10",
        "12.09",
        "12.08",
        "12.07",
        "12.06",
      ],
      dataOpen: [
        20, 8, 7, 10, 12, 3, 15, 20, 8, 7, 10, 12, 3, 15, 20, 8, 7, 10, 12, 3,
        15, 20,
      ],
      dataClose: [
        -4, -16, -17, -14, -12, -21, -9, -4, -16, -17, -14, -12, -21, -9, -4,
        -16, -17, -14, -12, -21, -9, -5,
      ],
    },
    year: {
      dateArr: [
        "01.01",
        "02.02",
        "03.03",
        "04.01",
        "05.01",
        "06.01",
        "07.01",
        "08.01",
        "09.01",
        "10.01",
        "11.01",
        "12.01",
      ],
      dataOpen: [23, 19, 6, 14, 9, 20, 8, 7, 10, 12, 3, 15],
      dataClose: [-23, -19, -6, -14, -9, -4, -16, -17, -14, -12, -21, -9],
    },
  };
  var item = data[type];
  timeChart.setOption(init_option(item.dateArr, item.dataOpen, item.dataClose));
}
// 设备在线
var deviceLineList = $("#deviceLineList > .device-line-item");
function reset_deviceLineList(type) {
  var data = {
    week: [
      {
        total: 100,
        online: 40,
      },
      {
        total: 100,
        online: 60,
      },
      {
        total: 100,
        online: 50,
      },
      {
        total: 100,
        online: 44,
      },
      {
        total: 100,
        online: 75,
      },
    ],
    month: [
      {
        total: 700,
        online: 240,
      },
      {
        total: 700,
        online: 440,
      },
      {
        total: 700,
        online: 640,
      },
      {
        total: 700,
        online: 440,
      },
      {
        total: 700,
        online: 340,
      },
    ],
    year: [
      {
        total: 1000,
        online: 940,
      },
      {
        total: 1000,
        online: 540,
      },
      {
        total: 1000,
        online: 440,
      },
      {
        total: 1000,
        online: 940,
      },
      {
        total: 1000,
        online: 840,
      },
    ],
  };
  var item = data[type];
  deviceLineList.each(function (index, target) {
    var self = $(target);
    var data = item[index];
    self.find(".progress-main")[0].style.width =
      (data.online / data.total) * 100 + "%";
    self.find(".online")[0].innerText = data.online;
    self.find(".total")[0].innerText = data.total;
  });
}
// 用户行为
var usercommand_items = $("#usercommand > .ti-item");
$("#usercommand").on("click", ".ti-item", function () {
  usercommand_items.each(function () {
    $(this).removeClass("active");
  });
  var self = $(this);
  self.addClass("active");
  reset_commandChart(self.attr("data-name"));
});
function reset_commandChart(type) {
  var data = {
    week: [100, 200, 300, 400],
    month: [500, 800, 1000, 1400],
    year: [9000, 1350, 1125, 2665],
    voice: [80, 99, 120, 130, 160],
    keypad: [85, 230, 74, 86, 99],
    amg: [66, 55, 77, 88, 10, 66],
  };
  commandChart.setOption(init_option4(data[type]));
}
// 户行为日活率
function reset_dailyChart(type) {
  var data = {
    week: {
      daysArr: ["12.27", "12.26", "12.25", "12.24", "12.23", "12.22", "12.21"],
      appArr: [1, 0, 0, 0, 0, 0, 0, 0],
      timing: [0, 1, 0, 0, 0, 0, 0, 0],
      automate: [0, 0, 1, 0, 0, 0, 0, 0],
      panel: [0, 0, 0, 1, 0, 0, 0, 0],
      cloud: [0, 0, 0, 0, 1, 0, 0, 0],
      sound: [0, 0, 0, 0, 0, 1, 0, 0],
    },
    month: {
      daysArr: [
        "12.27",
        "12.26",
        "12.25",
        "12.24",
        "12.23",
        "12.22",
        "12.21",
        "12.20",
        "12.19",
        "12.18",
        "12.17",
        "12.16",
        "12.15",
        "12.14",
        "12.13",
        "12.12",
        "12.11",
        "12.10",
        "12.09",
        "12.08",
        "12.07",
        "12.06",
      ],
      appArr: [
        1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0,
      ],
      timing: [
        0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1,
      ],
      automate: [
        0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
      ],
      panel: [0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
      cloud: [0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0],
      sound: [0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0],
    },
    year: {
      daysArr: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      appArr: [1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0],
      timing: [0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0],
      automate: [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0],
      panel: [0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0],
      cloud: [0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0],
      sound: [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0],
    },
  };
  var item = data[type];
  dailyChart.setOption(
    init_option3(
      item.daysArr,
      item.appArr,
      item.timing,
      item.automate,
      item.panel,
      item.cloud,
      item.sound
    )
  );
}
window.onhashchange = function () {
  var type = format_path(window.location.hash);
  if (!type) {
    return false;
  }
  reset_onlineCharts(type);
  reset_openCharts(type);
  reset_offlineCharts(type);
  reset_onlineChart(type);
  reset_timeChart(type);
  reset_deviceLineList(type);
  reset_commandChart(type);
  reset_dailyChart(type);
};
